<template>
  <div>
    <div class="raceDetail">
      <h2>{{ raceDetail.title }}</h2>
      <div class="types">
        <!-- 赛制 -->
        <n-button class="btn" size="small" round type="warning">
          <i class="iconfont icon-bisai"></i>
          <span
            class="text"
            v-for="(item, index) in formats"
            :key="item.value"
            v-show="raceDetail.format == item.value"
            >{{ item.label }}</span
          >
        </n-button>
        <n-button
          v-for="(item, index) in teamType"
          :key="item.value"
          class="btn"
          size="small"
          round
          :type="item.type"
          v-show="raceDetail.type == item.value"
        >
          <i class="iconfont icon-tuandui"></i>{{ item.label }}
        </n-button>
        <n-button
          v-for="(item, index) in auths"
          :key="item.value"
          class="btn"
          size="small"
          round
          :type="item.type"
          strong
          secondary
          v-show="raceDetail.auth == item.value"
        >
          <i class="iconfont icon-bisai1"></i>
          <span class="text2">{{ item.label }}</span>
        </n-button>
        <n-button class="btn" size="small" round type="info" strong secondary>
          <i class="iconfont icon-shijian"></i>
          <span class="text2">{{ getDuration(raceDetail.duration) }}</span>
        </n-button>
      </div>
      <div
        class="watch"
        v-if="store.oj.premission.includes('web:front:watchRace')"
      >
        <n-button
          class="btn2"
          size="small"
          round
          type="success"
          @click="checkRace()"
        >
          <i class="iconfont icon-chakan"></i>
          <span class="text2">监管比赛</span>
        </n-button>
      </div>
      <div class="date">
        <n-steps :current="currentStep" v-show="raceDetail.type == 1">
          <n-step title="比赛报名时间" :description="raceDetail.regStartTime" />
          <n-step title="比赛报名结束" :description="raceDetail.regEndTime" />
          <n-step title="比赛开始时间" :description="raceDetail.startTime" />
          <n-step title="比赛结束时间" :description="raceDetail.endTime" />
        </n-steps>
        <n-steps :current="currentStep" v-show="raceDetail.type == 0">
          <n-step title="比赛开始时间" :description="raceDetail.startTime" />
          <n-step title="比赛结束时间" :description="raceDetail.endTime" />
        </n-steps>
      </div>
      <div class="footerBox">
        <div class="description">
          <h3>简介：</h3>
          <v-md-editor
            class="d-container"
            :mode="'preview'"
            v-model="raceDetail.description"
          ></v-md-editor>
        </div>
        <div class="btnBox">
          <!-- 个人赛 -->
          <transition>
            <div
              class="passwd"
              :class="raceStatus == -1 ? 'blue' : 'green'"
              v-if="
                raceDetail.type == 0 && raceDetail.auth == 0 && raceStatus != 1
              "
            >
              <n-button
                strong
                secondary
                :type="raceStatus == -1 ? 'info' : 'success'"
                v-if="!IsRegisterRace"
                round
                class="join2"
                @click="userRegisterRace()"
              >
                <i class="iconfont icon-bisai2"></i>
                我要报名
                <i class="iconfont icon--xiayibu"></i>
              </n-button>
              <n-button
                strong
                secondary
                :type="raceStatus == -1 ? 'info' : 'success'"
                v-else
                round
                class="join2"
                @click="hanlderToRace()"
              >
                <i class="iconfont icon-bisai2"></i>
                {{ raceStatus == -1 ? "待开始" : "去答题" }}
                <i class="iconfont icon--xiayibu"></i>
              </n-button>
            </div>
          </transition>
          <!-- 保护赛 -->
          <transition>
            <div
              class="passwd orange"
              v-if="raceDetail.auth == 2 && raceStatus != 1"
            >
              <n-button
                strong
                secondary
                type="warning"
                round
                class="protect"
                v-if="!IsRegisterRace"
              >
                <i class="iconfont icon-chacha"></i>
                保护比赛仅对特定用户/团队开放
              </n-button>
              <n-button
                strong
                secondary
                type="warning"
                round
                class="protect"
                v-else
                :disabled="raceStatus == -1"
                @click="hanlderToRace()"
              >
                {{ raceStatus == -1 ? "待开始" : "去答题" }}
                <i class="iconfont icon--xiayibu"></i>
              </n-button>
              <div class="text">
                Tips： 若您在比赛名单内，无法进入比赛。请联系比赛负责人！
              </div>
            </div>
          </transition>
          <!-- 私有比赛 -->
          <transition>
            <div
              class="passwd red"
              v-if="raceDetail.auth == 1 && raceStatus != 1"
            >
              <div class="pwd" v-if="!IsRegisterRace">
                <div class="p-tip">
                  <i class="iconfont icon-chacha"></i> 私有比赛密码
                </div>
                <div class="p-input">
                  <n-input
                    class="p-i-input"
                    placeholder="比赛密码"
                    v-model:value="registerMsg.pwd"
                    type="password"
                    clearable
                    show-password-on="mousedown"
                  ></n-input>
                  <n-button
                    class="p-i-btn"
                    type="error"
                    @click="userRegisterRace()"
                    >确认</n-button
                  >
                </div>
                <div class="text">Tips： 若您忘记密码，请联系比赛负责人！</div>
              </div>
              <div class="intoRace" v-else>
                <n-button
                  strong
                  secondary
                  type="error"
                  round
                  class="protect"
                  :disabled="raceStatus == -1"
                  @click="hanlderToRace()"
                >
                  {{ raceStatus == -1 ? "待开始" : "去答题" }}
                  <i class="iconfont icon--xiayibu"></i>
                </n-button>
                <div class="text">Tips： 请勿将密码透露给其他无关人员！</div>
              </div>
            </div>
          </transition>
          <!-- 团队赛 -->
          <transition>
            <div
              class="passwd"
              :class="raceStatus == -1 ? 'blue' : 'green'"
              v-if="
                raceDetail.type == 1 && raceStatus != 1 && raceDetail.auth == 0
              "
            >
              <n-button
                strong
                secondary
                v-show="!IsRegisterRace"
                :type="raceStatus == -1 ? 'info' : 'success'"
                round
                class="join"
                @click="userRegisterRace"
              >
                我要报名
                <i class="iconfont icon-tuanduishezhi"></i>
              </n-button>
              <n-button
                strong
                secondary
                v-show="IsRegisterRace"
                :disabled="!isJoinTeam"
                :type="raceStatus === -1 ? 'info' : 'success'"
                round
                class="join"
                @click="hanlderToRace()"
              >
                {{ raceStatus === -1 ? "待开始" : "去答题" }}
                <i class="iconfont icon--xiayibu"></i>
              </n-button>
              <div class="text">Tips： 团队赛需要加入队伍，比赛开始后进入!</div>
            </div>
          </transition>

          <!-- 比赛结束后 -->
          <transition>
            <div class="passwd red" v-if="raceStatus == 1">
              <n-button
                v-if="!raceDetail.allowEndEntry"
                strong
                secondary
                type="error"
                round
                class="protect"
              >
                <i class="iconfont icon-chacha"></i>
                比赛已结束</n-button
              >
              <n-button
                v-else
                strong
                secondary
                type="error"
                round
                class="protect"
                @click="hanlderToRace()"
              >
                <i class="iconfont icon-bisai2"></i>
                比赛已结束，去看看</n-button
              >
              <div class="text">
                Tips： 比赛已结束，如有疑问请联系比赛负责人。
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <div class="raceCards" v-if="raceBottom">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane
          label="团队"
          name="tab1"
          v-if="IsRegisterRace && raceDetail.type == 1"
        >
          <template #label>
            <i class="iconfont icon-liebiao1"></i>团队
          </template>
          <raceTeam
            :cid="route.params.rid"
            :raceStatus="raceStatus"
            v-model="isJoinTeam"
          ></raceTeam>
        </el-tab-pane>
        <el-tab-pane
          label="排名"
          name="tab2"
          v-if="
            raceDetail.isShowRank === 0 &&
            (raceEnd ||
              (raceStart &&
                (raceDetail.format !== 1 ||
                  (raceDetail.format === 1 &&
                    (store.oj.userData.authLevel === 2 ||
                      (raceDetail.uid === store.oj.userData.id &&
                        store.oj.userData.authLevel !== 0))))))
          "
        >
          <template #label>
            <i class="iconfont icon-paiming"></i>排名
          </template>
          <div class="r-head" v-show="!isShowDetail">
            <div class="r-search">
              <div
                class="switch"
                v-if="raceDetail.type === 1 && raceDetail.format !== 0"
              >
                <n-switch
                  @click="changePerson"
                  :default-value="true"
                  :rail-style="railStyle"
                >
                  <template #checked> 团队排名 </template>
                  <template #unchecked> 个人排名 </template>
                </n-switch>
              </div>
              <n-input
                v-model:value="rankParams.searchValue"
                type="text"
                placeholder="请输入名称"
                round
              >
                <template #suffix>
                  <i class="iconfont icon-sousuo"></i>
                </template>
              </n-input>
            </div>
            <div class="r-do">
              <div class="r-deploy">
                <n-popover placement="left" trigger="click">
                  <template #trigger>
                    <n-button size="small" style="grid-area: 3 / 1 / 4 / 2">
                      <template #icon>
                        <i class="iconfont icon-shezhi2"></i>
                      </template>
                      榜单设置
                    </n-button>
                  </template>
                  <div class="large-text">
                    <div class="show">
                      打星用户<n-switch v-model:value="showStar" size="small" />
                    </div>
                    <div class="show">
                      自动刷新
                      <n-popover trigger="hover">
                        <template #trigger>
                          <n-switch v-model:value="showAuto" size="small" />
                        </template>
                        <span>每10s一次</span>
                      </n-popover>
                    </div>
                  </div>
                </n-popover>
              </div>
              <div class="r-flash">
                <n-button type="primary" size="small" round @click="falshRank">
                  <template #icon>
                    <i class="iconfont icon-shuaxin"></i>
                  </template>
                  刷新
                </n-button>
              </div>
            </div>
          </div>
          <racePersonRank
            v-if="
              (raceDetail.type === 0 || isPerson) &&
              (raceDetail.format === 1 || raceDetail.format === 2)
            "
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="awardConfig"
            :location="false"
          ></racePersonRank>
          <raceTeamRank
            v-if="
              raceDetail.type === 1 &&
              !isPerson &&
              (raceDetail.format === 1 || raceDetail.format === 2)
            "
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="groupConfig"
            :location="false"
          ></raceTeamRank>
          <raceAcmPersonRank
            v-if="
              (raceDetail.type === 0 || isPerson) && raceDetail.format === 0
            "
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="awardConfig"
            :location="false"
            @changeShowDetail="changeShowDetail"
          >
          </raceAcmPersonRank>
          <raceAcmTeamRank
            v-if="raceDetail.type === 1 && !isPerson && raceDetail.format === 0"
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="groupConfig"
            :location="false"
          >
          </raceAcmTeamRank>
          <raceTianTiPersonRank
            v-if="
              (raceDetail.type === 0 || isPerson) && raceDetail.format === 3
            "
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="awardConfig"
            :location="false"
            :tiantiStage="tiantiStage"
          >
          </raceTianTiPersonRank>
          <raceTianTiTeamRank
            v-if="raceDetail.type === 1 && !isPerson && raceDetail.format === 3"
            ref="raceR"
            :rankName="raceDetail.rankShowName"
            :showAuto="showAuto"
            :showStar="showStar"
            :rankParams="rankParams"
            :awardConfig="awardConfig"
            :location="false"
            :tiantiStage="tiantiStage"
          >
          </raceTianTiTeamRank>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, defineAsyncComponent, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getRaceDetailAPI,
  userIsRegisterRaceAPI,
  userRegisterRaceAPI,
} from "@/api/ojAPI/ojAPI";
import { ElMessage } from "element-plus";
import useStore from "@/store";
import { formats, teamType, auths } from "./config";

const racePersonRank = defineAsyncComponent(() =>
  import("@/components/ojComponents/race/rank/racePersonRank.vue")
);
const raceTeamRank = defineAsyncComponent(() =>
  import("@/components/ojComponents/race/rank/raceTeamRank.vue")
);
const raceAcmPersonRank = defineAsyncComponent(() =>
  import("@/components/ojComponents/race/rank/raceAcmPersonRank.vue")
);
const raceAcmTeamRank = defineAsyncComponent(() =>
  import("@/components/ojComponents/race/rank/raceAcmTeamRank.vue")
);
const raceTeam = defineAsyncComponent(() =>
  import("@/components/ojComponents/race/raceTeam.vue")
);

onMounted(() => {
  if (localStorage.getItem("raceTab")) {
    activeName.value = localStorage.getItem("raceTab");
  }
});
const route = useRoute();
const router = useRouter();
const store = useStore();
//比赛状态
const raceStatus = ref(0);
const isJoinTeam = ref(false);
//cid==rid 名字不一样 含义一样
onMounted(() => {
  getRaceDetail(route.params.rid);
  registerMsg.cid = route.params.rid;
  //重置比赛状态
  localStorage.removeItem("format");
  const auto = localStorage.getItem(`${route.params.rid}ShowAuto`);
  const star = localStorage.getItem(`${route.params.rid}ShowStar`);
  if (auto) {
    if (auto.includes("true")) {
      showAuto.value = true;
    }
  }
  if (star) {
    if (star.includes("true")) {
      showStar.value = true;
    }
  }
});

//获取比赛详情
const raceDetail = reactive({});
const raceBottom = ref(false);
const raceStart = ref(false);
const raceEnd = ref(false);
const awardConfig = ref([]);
const groupConfig = ref([]);
const tiantiStage = ref([]);
const getRaceDetail = async (id) => {
  await getRaceDetailAPI(id)
    .then((res) => {
      if (res.data.code === 200) {
        if (res.data.data.accountAwardConfig) {
          awardConfig.value = JSON.parse(res.data.data.accountAwardConfig);
        }
        if (res.data.data.groupAwardConfig) {
          groupConfig.value = JSON.parse(res.data.data.groupAwardConfig);
        }
        if (res.data.data.tiantiStageConfig) {
          tiantiStage.value = JSON.parse(res.data.data.tiantiStageConfig);
        }
        Object.assign(raceDetail, res.data.data);
        const regStartTime = new Date(res.data.data.regStartTime).getTime();
        const regEndTime = new Date(res.data.data.regEndTime).getTime();
        const startTime = new Date(res.data.data.startTime).getTime();
        const endTime = new Date(res.data.data.endTime).getTime();
        const now = Date.now();
        sessionStorage.setItem(
          `${route.params.rid}AllowEntry`,
          raceDetail.allowEndEntry
        );

        userIsRegisterRace(route.params.rid);
        currentStep.value = 1;
        if (now > startTime) {
          raceStart.value = true;
        }
        if (now > endTime) {
          raceEnd.value = true;
        }
        if (now > endTime) {
          currentStep.value = 5;
          raceStatus.value = 1;
          return;
        }
        if (now > startTime) {
          currentStep.value = 4;
          raceStatus.value = 0;
          return;
        }
        if (now > regEndTime) {
          currentStep.value = 3;
          raceStatus.value = -1;
          return;
        }
        if (now > regStartTime) {
          currentStep.value = 2;
          raceStatus.value = -1;
          return;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取比赛持续时间
const currentStep = ref(1);
const getDuration = (duration) => {
  if (Math.floor(duration / 60) < 60) {
    return (duration / 60).toFixed(1) + "分钟";
  }
  if (Math.floor(duration / 60 / 60) < 24) {
    return (duration / 60 / 60).toFixed(1) + "小时";
  }
  return (duration / 60 / 60 / 24).toFixed(0) + "天";
};

//用户是否参加比赛
const IsRegisterRace = ref(false);
const userIsRegisterRace = async (cid) => {
  await userIsRegisterRaceAPI(cid)
    .then((res) => {
      if (res.data.code === 200) {
        IsRegisterRace.value = res.data.data;
        if (
          (!res.data.data || raceDetail.type !== 1) &&
          raceDetail.isShowRank === 0
        ) {
          activeName.value = "tab2";
        } else {
          activeName.value = "tab1";
        }
        if (
          (raceDetail.isShowRank === 0 && raceStart.value) ||
          (raceDetail.type === 1 && res.data.data)
        ) {
          if (
            raceDetail.format !== 1 ||
            (raceDetail.format === 1 && raceEnd.value)
          )
            raceBottom.value = true;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const registerMsg = reactive({
  pwd: "",
  cid: "",
});
//用户参加比赛
const userRegisterRace = async () => {
  if (
    registerMsg.pwd.length == 0 &&
    raceDetail.auth == 1 &&
    store.oj.userData.authLevel != 2 &&
    store.oj.userData.username != raceDetail.author &&
    store.oj.userData.authLevel != 1
  ) {
    ElMessage.error("请输入密码");
    return;
  }
  await userRegisterRaceAPI(registerMsg)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        getRaceDetail(route.params.rid);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//单人赛跳转
const hanlderToRace = () => {
  // if (
  //   raceDetail.type == 1 &&
  //   isJoinTeam.value == false &&
  //   store.oj.userData.authLevel != 2 &&
  //   store.oj.userData.username != raceDetail.author &&
  //   store.oj.userData.authLevel != 1
  // ) {
  //   ElMessage.error("请加入团队")
  //   return
  // }

  const now = Date.now();
  const start = Date.parse(raceDetail.startTime);
  // const end = Date.parse(raceDetail.endTime)
  // if (
  //   now - end > 0 &&
  //   store.oj.userData.authLevel != 2 &&
  //   store.oj.userData.username != raceDetail.author &&
  //   store.oj.userData.authLevel != 1
  // ) {
  //   ElMessage.error("比赛已结束")
  //   return
  // }
  if (
    now - start > 0 ||
    store.oj.userData.authLevel == 2 ||
    (store.oj.userData.username == raceDetail.author &&
      store.oj.userData.authLevel == 1)
  ) {
    const str = JSON.stringify(raceDetail.format);
    localStorage.setItem(`${route.params.rid}format`, str);
    router.push({
      path: `/home/racepage/${route.params.rid}/problem`,
    });
  } else {
    ElMessage.error("比赛未开始");
    return;
  }
};
//单人赛跳转
const checkRace = () => {
  // if (
  //   raceDetail.type == 1 &&
  //   isJoinTeam.value == false &&
  //   store.oj.userData.authLevel != 2 &&
  //   store.oj.userData.username != raceDetail.author &&
  //   store.oj.userData.authLevel != 1
  // ) {
  //   ElMessage.error("请加入团队")
  //   return
  // }

  const now = Date.now();
  const start = Date.parse(raceDetail.startTime);
  // const end = Date.parse(raceDetail.endTime)
  // if (
  //   now - end > 0 &&
  //   store.oj.userData.authLevel != 2 &&
  //   store.oj.userData.username != raceDetail.author &&
  //   store.oj.userData.authLevel != 1
  // ) {
  //   ElMessage.error("比赛已结束")
  //   return
  // }

  if (
    store.oj.premission.includes("web:front:watchRace") ||
    store.oj.userData.username == raceDetail.author
  ) {
    const str = JSON.stringify(raceDetail.format);
    localStorage.setItem(`${route.params.rid}format`, str);
    router.push({
      path: `/home/racepage/${route.params.rid}/problem`,
    });
  } else {
    ElMessage.error("无权限");
    return;
  }
};

const activeName = ref("tab1");
watch(activeName, () => {
  localStorage.setItem("raceTab", activeName.value);
});
//赛外排名数据
const rankParams = reactive({
  pageSize: 20,
  pageNum: 1,
  searchValue: "",
});
const deboundTime = ref(null);
const showStar = ref(false);
const showAuto = ref(false);
const raceR = ref();
const isShowDetail = ref(false);
const changeShowDetail = (data) => {
  isShowDetail.value = data;
};
const flashRank = () => {
  raceR.value.getRaceRank();
  raceR.value.getRaceProblem();
};
const flash = () => {
  if (document.querySelector(".icon-shuaxin").classList.contains("flash")) {
    return;
  }
  document.querySelector(".icon-shuaxin").classList.add("flash");
};
const noFlash = () => {
  document.querySelector(".icon-shuaxin").classList.remove("flash");
};
const falshRank = () => {
  flash();
  if (deboundTime.value) {
    clearTimeout(deboundTime.value);
  }
  deboundTime.value = setTimeout(() => {
    flashRank();
    noFlash();
  }, 880);
};
const railStyle = ({ focused, checked }) => {
  const style = {};
  if (!checked) {
    style.background = "#18a058";
    if (focused) {
      style.boxShadow = "0 0 0 2px #18a058";
    }
  } else {
    style.background = "#2080f0";
    if (focused) {
      style.boxShadow = "0 0 0 2px #2080f040";
    }
  }

  return style;
};
const isPerson = ref(false);
const changePerson = () => {
  isPerson.value = !isPerson.value;
};
watch(rankParams, () => {
  raceR.value.getRaceRank();
});
watch(showStar, () => {
  localStorage.setItem(`${route.params.rid}ShowStar`, showAuto.value);
  raceR.value.getRaceRank();
});
let time = null;
watch(showAuto, () => {
  localStorage.setItem(`${route.params.rid}ShowAuto`, showAuto.value);
  if (showAuto.value) {
    if (time) {
      clearInterval(time);
    }
    time = setInterval(() => {
      if (
        raceDetail.isShowRank === 0 &&
        (raceEnd ||
          (raceStart &&
            (raceDetail.format !== 1 ||
              (raceDetail.format === 1 &&
                (store.oj.userData.authLevel === 2 ||
                  (raceDetail.uid === store.oj.userData.id &&
                    store.oj.userData.authLevel !== 0))))))
      ) {
        raceR.value.getRaceRank();
        raceR.value.getRaceProblem();
      }
    }, 10000);
  } else {
    clearInterval(time);
  }
});
</script>

<style lang="less" scoped>
.raceDetail {
  width: 95%;
  padding-top: 10px;
  margin: 0 auto;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 5px 5px 16px #e6e6e6, -5px -5px 16px #ffffff;
  display: flex;
  flex-direction: column;

  .watch {
    width: 100%;
    display: flex;

    .btn2 {
      margin: auto 2% auto auto;
    }
  }

  h2 {
    text-align: center;
    border-bottom: 2px solid rgb(214, 234, 218);
  }

  .types {
    display: flex;
    flex-direction: row;
    margin: 10px auto;
    width: 100%;
    justify-content: center;

    .btn {
      margin: auto 10px;
    }
  }

  .date {
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 20px auto;
  }

  .footerBox {
    display: flex;
    flex-wrap: nowrap;

    .description {
      overflow-y: scroll;
      width: 60%;
      margin: 20px auto 10px auto;
      border: 3px solid rgb(214, 234, 218);
      border-radius: 20px;
      padding: 10px;
      height: 200px;

      h3 {
        font-size: 18px;
      }
    }

    .btnBox {
      width: 33%;
      height: 220px;
      margin: 20px auto 10px auto;
    }
  }
}

.raceCards {
  width: 95%;
  min-height: 300px;
  padding-top: 10px;
  margin: 10px auto;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 5px 5px 16px #e6e6e6, -5px -5px 16px #ffffff;
  display: flex;
  flex-direction: column;

  .r-head {
    display: flex;
    justify-content: space-between;
    align-content: center;
    border-bottom: 1px solid rgb(58, 159, 85);
    padding-bottom: 10px;

    .r-search {
      width: 30%;
      display: flex;
      align-items: center;

      .switch {
        width: 30%;
        margin-left: 10px;
        margin-right: 5px;
      }
    }

    .r-do {
      display: flex;

      .r-deploy {
        margin-right: 10px;

        .n-button {
          --n-height: 31px !important;
          --n-border-radius: 20px !important;
          --n-font-size: 12px !important;
        }

        .large-text {
          padding: 10px;
        }

        .showChart {
          margin-top: 10px;
        }
      }

      .r-flash {
        margin-right: 10px;
      }

      .flash {
        animation: loader 0.88s infinite cubic-bezier(0.3, 0.5, 0.7, 1);
      }

      @keyframes loader {
        0% {
          transform: rotate(0deg);
          filter: hue-rotate(360deg);
        }

        100% {
          transform: rotate(360deg);
          filter: hue-rotate(0deg);
        }
      }
    }
  }
}

.passwd {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 3px solid rgb(214, 234, 218);
  display: flex;
  flex-direction: column;

  .pwd {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .intoRace {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .text {
    margin: 20px auto;
  }

  .p-tip {
    color: rgb(198, 51, 81);
    text-align: center;
    font-size: 20px;
    font-weight: 550;
    margin-top: 20px;
  }

  .p-input {
    height: 40%;
    display: flex;
    width: 70%;
    margin: 20px auto 0 auto;

    .p-i-input {
      margin: auto 0 auto auto;
    }

    .p-i-btn {
      margin: auto auto auto 10px;
    }
  }

  .protect {
    margin: 50px auto 0 auto;
    font-size: 24px;

    .iconfont {
      font-size: 28px;
    }
  }

  .join {
    margin: auto auto 0 auto;
    font-size: 24px;
    width: 50%;
    height: 20%;

    .iconfont {
      font-size: 28px;
    }
  }

  .join2 {
    margin: auto auto 0 auto;
    font-size: 24px;
    width: 50%;
    height: 20%;

    .iconfont {
      font-size: 28px;
    }
  }

  .join2 {
    margin: auto;
  }
}

.orange {
  background-color: rgba(250, 234, 204, 0.3);
  border-color: rgb(233, 160, 23);

  .text {
    margin: auto;
    color: rgb(233, 160, 23);
  }
}

.red {
  background-color: rgba(189, 53, 82, 0.2);
  border-color: rgb(189, 53, 82);

  .text {
    margin: auto;
    color: rgb(189, 53, 82);
  }
}

.green {
  background-color: rgba(223, 240, 228, 0.3);
  border-color: rgb(58, 159, 85);

  .text {
    margin: auto;
    color: rgb(58, 159, 85);
  }
}

.blue {
  background-color: rgba(85, 158, 255, 0.3);
  border-color: rgb(85, 158, 255);

  .text {
    margin: auto;
    color: rgb(85, 158, 255);
  }
}
</style>
